<template>
    <div class="container">
        <div class="card">
            <div class="title">诉求信息</div>
            <div class="table">
                <div class="item">
                    <div class="label">诉求类型</div>
                    <div class="content">{{info.typeName}}</div>
                </div>
                <div class="item">
                    <div class="label">申请时间</div>
                    <div class="content">{{info.createDate}}</div>
                </div>
                <div class="item">
                    <div class="label">当前状态</div>
                    <div class="content" :style="{color: info.replyStatus === 1 ? '#67C23A' : '#E6A23C'}">{{info.replyStatusName}}</div>
                </div>
                <div class="item">
                    <div class="label">诉求内容</div>
                    <div class="content">{{info.content}}</div>
                </div>
            </div>
        </div>
        <div v-if="info.replyStatus === 1" class="card">
            <div class="title">处理信息</div>
            <div class="table">
                <div class="item">
                    <div class="label">受理部门</div>
                    <div class="content">{{info.acceptDeptName}}</div>
                </div>
                <div class="item">
                    <div class="label">办结时间</div>
                    <div class="content">{{info.updateDate}}</div>
                </div>
                <div class="item">
                    <div class="label">回复内容</div>
                    <div class="content">{{info.reply}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { getOrderDetailAPI } from "../api/apanage";

export default {
    data() {
        return {
            loading: false,
            info: {},
        };
    },
    onShareAppMessage() {},
    onLoad(options) {
        let { id } = options;
        this.loading = true;
        wx.showLoading({
            title: "加载中...",
        });
        getOrderDetailAPI({ id }).then((res) => {
            this.info = res.data;
            wx.hideLoading();
            this.loading = false;
        });
    },
};
</script>
<style scoped lang="scss">
@import "../assets/scss/common.scss";

.container {
    padding: 15px;
    .card {
        margin-bottom: 20px;
        .title {
            font-size: 17px;
            font-weight: bold;
            margin-bottom: 10px;
            padding-left: 5px;
        }
        .table {
            border: 1px solid #efefef;
            border-left: none;
            .item {
                display: flex;
                justify-content: center;
                align-items: flex-start;
                background-color: #efefef;
                &:first-child {
                    .label {
                        border: none;
                    }
                    .content {
                        border: none;
                    }
                }
                .label {
                    flex: none;
                    width: 100px;
                    height: 100%;
                    text-align: center;
                    padding: 10px 0;
                    border-top: 1px solid #fff;
                }
                .content {
                    flex: auto;
                    background-color: #fff;
                    padding: 10px;
                    border-top: 1px solid #efefef;
                }
            }
        }
    }
}
</style>